import React, { useState, useEffect } from 'react';
import tab from '@/hoc/tab';
import { Space, Tag, Input, Button, Table, Modal, Form } from 'antd';
let params1 = '/getTourist';
function kefu(props: any) {
  const { total, change, addkefu } = props;
  const [propsArr, setPropsArr] = useState([]);
  const [form] = Form.useForm();
  const [id, setId] = useState('');

  const columns: any = [
    {
      title: 'ID',
      dataIndex: 'kefu_id',
    },
    {
      title: '客服编码',
      dataIndex: 'kefu_code',
    },
    {
      title: '游客名称',
      dataIndex: 'kefu_name',
    },
    {
      title: '游客头像',
      dataIndex: 'kefu_avatar',
      render: (_: any, record: any) => (
        <Space size="middle">
          <img
            src={`http://fangadmin.shbwyz.com${_}`}
            style={{ borderRadius: '50%', width: 50, height: 50 }}
          ></img>
        </Space>
      ),
    },
    {
      title: '在线状态',
      dataIndex: 'status',
      render: (_: any, record: any) => (
        <Space size="middle">
          <span>
            {record.online_status === '1' ? (
              <Tag color="error">离线</Tag>
            ) : (
              <Tag color="success">在线</Tag>
            )}
          </span>
        </Space>
      ),
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
    },
    {
      title: '操作',
      dataIndex: 'action',
      render: (_: any, record: any) => (
        <Space size="middle">
          <Tag
            color="success"
            style={{ cursor: 'pointer' }}
            onClick={() => {
              // echo(record);
              eidt(record);
            }}
          >
            编辑
          </Tag>
          <Tag color="error" style={{ cursor: 'pointer' }}>
            修改密码
          </Tag>
          <Tag
            color="success"
            style={{ cursor: 'pointer' }}
            onClick={() => {
              clear(record);
            }}
          >
            删除
          </Tag>
        </Space>
      ),
    },
  ];
  const clear = (record: any) => {
    let data = JSON.parse(JSON.stringify(propsArr));
    console.log(record);
    data.forEach((item: any, index: any) => {
      if (item.kefu_id == record.kefu_id) {
        if (confirm('是否删除')) {
          data.splice(index, 1);
          setPropsArr(data);
        }
      }
    });
  };
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [isAddModal, setIsAddModal] = useState(false);
  const handleCancel = () => {
    setIsModalOpen(false);
  };
  const eidt = (record: any) => {
    setIsModalOpen(true);
    form.setFieldsValue(record);
    setId(record.kefu_id);
  };
  const { Search } = Input;
  const onFinish = (values: any) => {
    change(id, values.kefu_name);
    setIsModalOpen(false);
  };
  const onFinish1 = (values: any) => {
    addkefu(values);
    setIsAddModal(false);
  };
  const handleCancel1 = () => {
    setIsModalOpen(false);
  };
  useEffect(() => {
    setPropsArr(props.arr);
  }, [props.arr]);
  console.log(props.arr);
  return (
    <div>
      <Button
        onClick={() => {
          setIsAddModal(true);
        }}
      >
        添加
      </Button>
      <Button type="dashed">客服姓名</Button>
      <Search
        placeholder="请输入搜索内容"
        enterButton="搜索"
        style={{ width: 190 }}
        onSearch={(values: any) => {
          let data = JSON.parse(JSON.stringify(propsArr));
          let arr = data.filter((item: any) => {
            return item.kefu_name.includes(values);
          });
          console.log(arr);
          setPropsArr(arr);
        }}
      />
      <Table
        columns={columns}
        dataSource={propsArr}
        pagination={{ pageSize: 8, showQuickJumper: true, total }}
      />
      <Modal
        title="修改客服"
        open={isModalOpen}
        onCancel={handleCancel}
        footer={null}
      >
        <Form
          form={form}
          name="kefu_id"
          style={{ maxWidth: 600 }}
          onFinish={onFinish}
        >
          <Form.Item
            label="客服名"
            name="kefu_name"
            rules={[{ required: true }]}
          >
            <Input />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">保存</Button>
          </Form.Item>
        </Form>
      </Modal>
      <Modal
        title="添加客服"
        open={isAddModal}
        onCancel={handleCancel1}
        footer={null}
      >
        <Form
          form={form}
          name="kefu_id"
          style={{ maxWidth: 600 }}
          onFinish={onFinish1}
        >
          <Form.Item
            label="客服名"
            name="kefu_name"
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入客服名" />
          </Form.Item>
          <Form.Item label="密码" name="password" rules={[{ required: true }]}>
            <Input />
          </Form.Item>
          <Form.Item>
            <Button htmlType="submit">保存</Button>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default tab(kefu, params1);
